<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" novalidate nz-form>
  <div *ngFor="let field of formFields">
    <!-- common forms start -->
    <div *ngIf="isFormFieldOfType(field,'text')">
      <nz-form-item>
        <nz-form-label [nzSpan]="5" [nzFor]="field.name">{{field.label}}</nz-form-label>
        <nz-form-control nzHasFeedback [nzErrorTip]="combineTpl"
                         [nzSpan]="12">
          <input nz-input ngModel [name]="field.name" [type]="field.type"
                 [required]="field?.required || false" [minlength]="field?.minlength || 0"
          />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div *ngIf="isFormFieldOfType(field,'number')">
      <nz-form-item>
        <nz-form-label [nzSpan]="5" [nzFor]="field.name">{{field.label}}</nz-form-label>
        <nz-form-control nzHasFeedback [nzErrorTip]="combineTpl"
                         [nzSpan]="12">
          <input nz-input
                 [name]="field.name"
                 [id]="field.name"
                 [type]="field.type"
                 [min]="field.min"
                 [max]="field.max"
                 [required]="field?.required || false"
                 ngModel
          />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div *ngIf="isFormFieldOfType(field,'radio')" class="radioLayout">
      <nz-form-item>
        <nz-form-label [nzSpan]="5" [nzFor]="field.name">{{field.label}}</nz-form-label>
        <nz-form-control nzHasFeedback [nzErrorTip]="combineTpl"
                         [nzSpan]="12">
          <nz-radio-group [name]="field.name" ngModel>
            <label nz-radio [nzValue]="r.value" *ngFor="let r of field.radioData"
                   [ngClass]="{'nz-radio-col': field.radioLayout === 'col'}">{{r.label}}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
    <!-- error -->
    <ng-template #combineTpl let-control>
      <div *ngFor="let item of field?.error">
        <ng-container *ngIf="control.hasError(item.type)">{{item.message}}</ng-container>
      </div>
    </ng-template>
    <!-- common forms end -->
    <div *ngIf="isFormFieldOfType(field,'custom')">
      <div *ngIf="field.name === 'handsomeReason' && myForm.value['isHandsome'] === 'Y'">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" [nzFor]="field.name">{{field.label}}</nz-form-label>
          <nz-form-control nzHasFeedback nzErrorTip="required"
                           [nzSpan]="12">
            <input nz-input ngModel [name]="field.name" type="text" required/>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </div>
  <pre>
    你帅吗？选择Yes, 出现表单框
    名字必须3个字符以上
    不同性别在Step2有不同表单展示
  </pre>
<!--  <button type="submit" nz-button nzType="primary">Submit</button>-->
</form>

